<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <h2 class="text-center">用户登录</h2>
        <div class="col-md-8 col-md-offset-2">
            <form id="form">
                {% csrf_token %}
                <div class="form-group">
                    <p>用户名:
                        <input type="text" name="username" class="form-control">
                    </p>
                </div>
                <div class="form-group">
                    <p>密码:
                        <input type="password" name="password" class="form-control">
                    </p>
                </div>
                <div class="form-group">
                    <p>验证码: <span style="color: red" id="errors"></span>
                        <div class="row">
                            <div class="col-md-6 ">
                                <input type="text" name="code" class="form-control">
                            </div>
                            <div class="col-md-6 ">
                                <img src="/get_code/" alt="" width="350" height="35" id="img">
                            </div>
                </div>
                    </p>
                </div>
                <input type="button" class="btn btn-success btn-block" id="subBtn" value="登录">
            </form>
        </div>
    </div>
</div>
<script>
    $('#img').click(function () {
        // 1.获取img标签原来的src属性
        let oldSrc = $(this).attr('src');
        // 2.重新赋值即可  只要src跟原来的不一样 就会重新发请求
        $(this).attr('src',oldSrc+'?')
    })

    $('#subBtn').click(function () {
        let dataDict = {};
        $.each($('#form').serializeArray(),function (index,dictObj) {
            dataDict[dictObj.name] = dictObj.value
        })
        $.ajax({
            url:'',
            type:'post',
            data:dataDict,
            success:function (args) {
                if(args.code === 10000){
                    window.location.href = args.url
                }else{
                    // 针对错误的提示 可以直接找一个固定的位置展示
                    $('#errors').text(args.msg)
                }
            }
        })
    })
</script>
</body>
</html>